<template>
    <div style="width: 600px; margin: auto;">
        <h1>实例：商品导航和商品列表组件间的通信</h1>
        <div style="float:left;width:20%;background-color:aquamarine;">
        <!-- 左侧导航组件 -->
         <GoodsNav @handle="handle"></GoodsNav>
        </div>
        <div style="float:left;width:80%;background-color:cornflowerblue;">
        <!-- 右侧商品展示组件 -->
         <GoodsList :list="list"/>
        </div>
    </div>
</template>

<script>
import GoodsList from '@/components/Sample/GoodsList.vue';
import GoodsNav from '@/components/Sample/GoodsNav.vue';

export default {
    components:{
        GoodsNav,
        GoodsList
    },
    data() {
        //父组件向子组件传递图片路径时，传的是绝对路径，但如果我们真的直接写绝对路径，那么在传递时，
        //会加上ip和端口号，在页面上就无法进行访问。可以通过加require解决这个问题。
        return {
            goods:[{id:'001',name:'香草冰激凌',cid:'1',src:require('../assets/logo.png')},
            {id:'002',name:'草莓冰激凌',cid:'1',src:require('../assets/logo.png')},
            {id:'003',name:'巧克力冰激凌',cid:'1',src:require('../assets/logo.png')},
            {id:'004',name:'可颂面包',cid:'2',src:require('../assets/logo.png')},
            {id:'005',name:'香蕉吐司',cid:'2',src:require('../assets/logo.png')},
            {id:'006',name:'德芙巧克力',cid:'3',src:require('../assets/logo.png')},
            {id:'007',name:'好时巧克力',cid:'3',src:require('../assets/logo.png')}
            ],
            list:[] //添加list数组，用来接收商品数据
        }
    },        
    //通过使用mounted生命周期钩子函数，使得打开页面时，就能把数据传递过来
    mounted(){
        this.list=this.goods.slice()
    },
    methods: {
        handle(val){
            this.list=this.goods.filter(v=>v.cid==val)
        }
    },
}
</script>